<template>
	<view>
		<view class="presentation">
			<text class="subtitle">ker-list-cell 列表Item</text>
			<text class="describe">设置是否显示箭头,是否显示边框,箭头样式</text>
		</view>
		<view class="presentation_subtitle">基础用法</view>
		<ker-list-cell v-for="(item,index) in 3" :key="index+'1'">
			<view class="item-content">
				列表文字
			</view>
		</ker-list-cell>
		<view class="presentation_subtitle" >展示箭头</view>
		<ker-list-cell :isArrow="true" v-for="(item,index) in 3" :key="index+'2'">
			<view class="item-content">
				列表文字
			</view>
		</ker-list-cell>
		<view class="presentation_subtitle" >带箭头样式</view>
		<ker-list-cell 
		:isArrow="true" 
		:arrowColor="'#000'" 
		:arrowSite="8" 
		:arrowWidth="2" 
		v-for="(item,index) in 3" :key="index+'3'">
			<view class="item-content">
				列表文字
			</view>
		</ker-list-cell>
		<view class="presentation_subtitle" >不带分割线</view>
		<ker-list-cell :isArrow="true" :isBorder="false" v-for="(item,index) in 3" :key="index+'4'">
			<view class="item-content">
				列表文字
			</view>
		</ker-list-cell>
		<view class="presentation_subtitle" >文字多行</view>
		<ker-list-cell :isArrow="true" v-for="(item,index) in 3" :key="index+'5'">
			<view class="item-content">
				列表 title 全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字
			</view>
		</ker-list-cell>
	</view>
</template>
<script>
	import kerListCell from '../../components/ker-list-cell/ker-list-cell.vue'
export default {
	data() {
		return {};
	},
	components:{
		kerListCell
	},
	methods: {},
	mounted() {}
};
</script>
<style lang="scss" scoped>
	.item-content{
		font-size: 14px;
		color: #999;
	}
	.presentation {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20px 40px;
		.subtitle {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	
		.describe {
			font-size: 14px;
			color: #999;
		}
	}
	.presentation_subtitle{
		font-size: 14px;
		color: #FFF;
		height: 36px;
		line-height: 36px;
		background-color: #6b6b6b;
		padding: 0 15px;
	}
</style>
